/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <section class="content">
    <Header title="我的"></Header>
    <div class="main" v-if="!isLogin" style="background: #fff; padding: 0 20px;">
      <button class="login_submit" @click="goLogin">登录/注册</button>
    </div>
    <div class="main" v-else>
      <div class="header">
        <div class="user_box" @click="goSetting">
          <div class="left">
            <img class="header_img" :src="user.avatar">
          </div>
          <div class="right">
            <p class="name">{{user.nickname}}</p>
            <!-- <p class="light">点亮职业人生</p> -->
          </div>
        </div>
      </div>
      <div class="container_box">
        <div class="container">
          <group title="学习中心">
            <cell title="已购班课" is-link @click.native="goBuyed">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="看课记录" is-link @click.native="goLearnHis">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="学习答疑" is-link @click.native="goConsultList">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="我的订单" is-link @click.native="goPayOrder">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
          </group>
          <group title="作业本">
            <cell title="错题本" is-link @click.native="goQueCollect({page: 'failed', })">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="试题收藏" is-link @click.native="goQueCollect({page: 'collect'})">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="做题记录" is-link @click.native="goDoCollect">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
          </group>
          <group title="个性设置">
            <cell title="修改密码" is-link @click.native="goChangePwd">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
            <cell title="退出登录" is-link @click.native="checkOut">
              <img
                slot="icon"
                width="20"
                style="display:block;margin-right:5px;"
                :src="require('../../assets/img/tiku/shouc.png')"
              >
            </cell>
          </group>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import Header from "../../components/Header/Header.vue";
import { Cell, CellBox, Group } from "vux";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isLogin: false,
      user: {}
    };
  },
  // computed: {
  //   ...mapState(["isLogin"])
  // },
  mounted: function() {
    const l = JSON.parse(localStorage.getItem("loginInfo"));
    if (l) {
      this.user = l;
      this.isLogin = true;
    } else {
      this.user = {};
      this.isLogin = false;
    }
  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    goLogin() {
      this.$router.push("/login");
    },
    goPayOrder() {
      this.$router.push("/payOrder");
    },
    goChangePwd() {
      this.$router.push({ path: "/changePwd", query: { title: "修改密码" } });
    },
    goSetting() {
      this.$router.push("/setting");
    },
    goLearnHis() {
      this.$router.push("/learnHis");
    },
    goBuyed() {
      this.$router.push("/buyed");
    },
    // 前往试题收藏
    goQueCollect(data) {
      this.$router.push({ path: "/queRecord", query: data });
    },
    // 前往做题记录
    goDoCollect() {
      this.$router.push({ path: "/doRecord" });
    },
    goConsultList() {
      this.$router.push({ path: "/consultList" });
    },
    // 退出登录
    checkOut() {
      localStorage.removeItem("loginInfo");
      this.$router.replace("/login");
    }
  },
  components: {
    Header,
    Group,
    Cell,
    CellBox
  }
};
</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  height: calc(~"100% - 50px");
}

.main {
  width: 100%;
  height: calc(~"100% - 46px");
  overflow: hidden;
  .mix-flex-center();
  flex-direction: column;
  position: relative;

  .header {
    flex: 0;
    width: 100%;
    padding: 20px;
    position: relative;
    box-sizing: border-box;

    .user_box {
      width: 100%;
      padding: 10px 15px;
      box-sizing: border-box;
      .box-shadow();
      .mix-flex-center();
      background: @white;

      .left {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        padding-left: 10px;

        .name {
          font-size: 15px;
        }

        .light {
          font-size: 13px;
        }
      }
    }
  }
  .container_box {
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    .container {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
}

.login_submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: @red;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}
</style>
